// 注释
/* 普通注释  会保留到编译后的文件中 */
// 静默注释  只保留在SASS源文件中，编译后被省略。


// 变量
// 变量名以$开头(变量:值;)  
// 解析: 在scss文件中可以提前定义变量,存储公共数据 ,scss文件便以为css是 会被替换为对应的值

// 用法
// 1. 存储公共数据
// 2. 变量可以和 css选择器,css属性名,css属性值拼接(插值语句)

$hot: #f10215;
$grey: #999;
$success: #99CCCC;
$cool: #0099CC;
$warm: #FFCCCC;
$live: #FF9999;

$typeArea: 1226px; //版心宽度

$side: left;





// 计算 (+ - * / %)
// scss文件中可以进行数值运算 => 编译时会直接输出运算的结果

// 加法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 减法: 一个有单位,一个没有单位  或者 两个都有单位(相同)
// 乘法: 一个有单位,一个没有单位  
// 除法: 一个有单位,一个没有单位  或者 两个都有单位(单位舍去 倍数  200px/2px => 100)


// 函数  => sass中允许自定义函数
@function pxtorem($val) {
    // @return calc($val/100px)*1rem;
    @return #{calc($val/100px)}rem;
}

// sass文件中 可以使用 @import语法引入另一个sass文件  =>  被引入的sass文件也会被脚本解析到指定css文件中(将多个css文件整合到一个css文件中)
@import "reset.scss";

// 嵌套语法
// sass中允许使用嵌套语法, sass解析css时,会默认将父选择器拼接到子选择器前面,用空格分隔 => 变为包含选择器(子代选择器)
.header {
    width: $typeArea;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    background-color: $grey;

    .header-nav {
        float: left;

        // .header .header-nav > li
        &>li {
            float: left;
            position: relative;

            // 父选择器修饰符  当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换：
            // &  被 .header .header-nav li 替换
            &:hover {
                // .header .header-nav li:hover
                background-color: #6ff;
                color: #6f6f6f;

                .subNav {
                    display: block;
                }
            }

            a {
                padding: 0 20px;
            }

            .subNav {
                width: 200px - 20px;
                padding-left: 20px;
                position: absolute;
                left: 0;
                top: 40px;
                background-color: #6ff;
                display: none;
            }
        }
    }

    .header-search {
        float: right;

        .searchCon {
            float: left;
        }

        .searchBtn {
            float: right;
        }

    }
}